<template>
    <div class="drawerContainer">
        <el-form :model="propJson" label-width="auto" style="width: 100%">
            <el-form-item label="卡片高度">
                <el-radio-group v-model="propJson.cardHeightType">
                    <el-radio label="AUTO">自适应高度</el-radio>
                    <el-radio label="CUSTOM">自定义高度</el-radio>
                </el-radio-group>
            </el-form-item>

            <el-form-item label="自定义高度" v-if="propJson.cardHeightType === 'CUSTOM'">
                <el-input v-model="propJson.cardHeight" style="width: 100%" placeholder="自定义高度"/>
            </el-form-item>

            <el-form-item label="卡片内上边距">
                <el-input v-model="propJson.cardPaddingTop" style="width: 100%" placeholder="卡片内上边距"/>
            </el-form-item>

            <el-form-item label="卡片内下边距">
                <el-input v-model="propJson.cardPaddingBottom" style="width: 100%" placeholder="卡片内下边距"/>
            </el-form-item>

            <el-form-item label="卡片内左边距">
                <el-input v-model="propJson.cardPaddingLeft" style="width: 100%" placeholder="卡片内左边距"/>
            </el-form-item>

            <el-form-item label="卡片内右边距">
                <el-input v-model="propJson.cardPaddingRight" style="width: 100%" placeholder="卡片内右边距"/>
            </el-form-item>

            <el-form-item label="卡片内容宽度">
                <el-input v-model="propJson.cardBodyWidth" style="width: 100%" placeholder="卡片内容宽度"/>
            </el-form-item>

            <el-form-item label="卡片阴影">
                <el-radio-group v-model="propJson.shadowType">
                    <el-radio label="never">无阴影</el-radio>
                    <el-radio label="hover">鼠标悬浮阴影</el-radio>
                    <el-radio label="always">始终阴影</el-radio>
                </el-radio-group>
            </el-form-item>

            <el-form-item label="背景颜色">
                <el-color-picker v-model="propJson.backgroundColor" show-alpha />
            </el-form-item>

            <el-form-item label="是否添加点击事件">
                <el-radio-group v-model="propJson.isClickAction">
                    <el-radio :label="true">是</el-radio>
                    <el-radio :label="false">否</el-radio>
                </el-radio-group>
            </el-form-item>

            <el-divider v-if="propJson.isClickAction">卡片点击事件</el-divider>

            <div style="display: flex; justify-content: center; align-items: center; margin-top: 3%;" v-if="propJson.isClickAction">
                <el-button type="primary" class="addCollapse" size="small" @click="addClickAction()">添加点击行为</el-button>
            </div>

            <CommonThirdServiceAction :actionList="propJson.cardClickAction" :commonParam="commonParam" v-if="propJson.isClickAction"/>
        </el-form>
    </div>
</template>

<script name="CommonCardDrawer" setup lang="ts">
import {computed, defineProps} from "vue";
import {useLowCodeStore} from "@/stores/lowcode/lowcode";
import CommonThirdServiceAction from "@/components/lowcode/service/CommonThirdServiceAction.vue";

let props = defineProps(['commonParam']);

let commonParam = computed(() => {return props['commonParam']})

let propJson = computed(() => {return useLowCodeStore().lowCodeDrawerJsonInfo});
</script>

<style scoped lang="less">

</style>